<template>
  <div class="disp_map_file">
    <!--    <div>-->
    <!--      <el-button @click="testchart">测试echart</el-button>-->
    <!--      <el-button @click="testMyData">测试设备数据</el-button>-->
    <!--    </div>-->
    <el-collapse>
      <el-collapse-item title="展开以配置数据筛选条件（地图数据中，红色为告警信息，蓝色为正常信息）">
        <el-row style="margin-bottom: 2%; margin-top:2%;">
          <el-col :span="22" :offset="1">
            <el-form ref="regForm" :model="reqForm" label-position="top">
              <el-col :span="reqLen" class="filterItem">
                <el-form-item label="客户ID" prop="clientId">
                  <el-input v-model="reqForm.clientId" placeholder="所查询信息的clientId"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="reqLen" class="filterItem">
                <el-form-item label="话题列表" prop="topics">
                  <el-row>
                    <el-input v-model="reqForm.topics" placeholder="查询的话题列表,多个值用英文逗号隔开"></el-input>
                  </el-row>
                </el-form-item>
              </el-col>
              <el-col :span="reqLen" class="filterItem">
                <el-form-item prop="topics">
                  <template slot="label">
                    数值区间
                    <el-switch v-model="valueSwitch"></el-switch>
                  </template>
                  <el-row>
                    <el-col :span="12" class="filterItem">
                      <el-input type="number" :step="0.0001"
                                :disabled="!valueSwitch" v-model="reqForm.valueInterval[0]"></el-input>
                    </el-col>
                    <el-col :span="12" class="filterItem">
                      <el-input type="number" :step="0.0001"
                                :disabled="!valueSwitch" v-model="reqForm.valueInterval[1]"></el-input>
                    </el-col>
                  </el-row>
                  <el-slider
                    :disabled="!valueSwitch"
                    v-model="reqForm.valueInterval"
                    range
                    ref="testSlider"
                    :max="100">
                  </el-slider>
                </el-form-item>
              </el-col>
              <el-col :span="reqLen" class="filterItem">
                <el-form-item label="是否告警" prop="alert">
                  <el-input v-model="reqForm.alert" placeholder="1为是，0为否"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="reqLen" class="filterItem">
                <el-form-item label="经度区间" prop="lonInterval">
                  <template slot="label">
                    经度区间
                    <el-switch v-model="lonSwitch"></el-switch>
                  </template>
                  <el-row>
                    <el-col :span="12" class="filterItem">
                      <el-input type="number" :step="0.0001"
                                @input="(val)=>{this.reqForm.lonInterval[0]=parseFloat(val)}"
                                :disabled="!lonSwitch" v-model="reqForm.lonInterval[0]"></el-input>
                    </el-col>
                    <el-col :span="12" class="filterItem">
                      <el-input type="number" :disabled="!lonSwitch" v-model="reqForm.lonInterval[1]"></el-input>
                    </el-col>
                  </el-row>
                  <el-slider
                    :disabled="!lonSwitch"
                    v-model="reqForm.lonInterval"
                    range
                    :max="180">
                  </el-slider>
                </el-form-item>
              </el-col>
              <el-col :span="reqLen" class="filterItem">
                <el-form-item prop="latInterval">
                  <template slot="label">
                    纬度区间
                    <el-switch v-model="latSwitch"></el-switch>
                  </template>
                  <el-row>
                    <el-col :span="12" class="filterItem">
                      <el-input :disabled="!latSwitch" v-model="reqForm.latInterval[0]"></el-input>
                    </el-col>
                    <el-col :span="12" class="filterItem">
                      <el-input :disabled="!latSwitch" v-model="reqForm.latInterval[1]"></el-input>
                    </el-col>
                  </el-row>
                  <el-slider
                    :disabled="!latSwitch"
                    v-model="reqForm.latInterval"
                    range
                    :max="180">
                  </el-slider>
                </el-form-item>
              </el-col>
              <el-col :span="reqLen" class="filterItem">
                <el-form-item prop="timestampInterval">
                  <template slot="label">
                    时间戳区间
                    <el-switch v-model="timestampSwitch"></el-switch>
                  </template>
                  <el-row>
                    <el-date-picker
                      :disabled="!timestampSwitch"
                      v-model="reqForm.timestampInterval"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-form>
            <div style="float: right; margin-top: 3%;margin-right: 8%">
              <el-button @click="formReset">重置</el-button>
              <el-button type="success" @click="submitAndRefresh">提交</el-button>
            </div>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
    <div style="margin-bottom: 1%;margin-top: 2%">
      <el-form label-position="left">
        <el-form-item label="地图操作">
          <el-button-group>
            <el-button @click="bmapObj.zoomIn()">放大</el-button>
            <el-button @click="bmapObj.zoomOut()">缩小</el-button>
          </el-button-group>
        </el-form-item>
      </el-form>
    </div>
    <div style="height: 100%;width: 90% ; margin-left: 3%;">
      <div id="dispMap" ref="chart"></div>
    </div>
  </div>

</template>

<script>
import axios from 'axios'
import qs from 'qs'
import Vue from 'vue';
import state from '../store/index'

import "echarts/extension/bmap/bmap"

export default {

  mounted() {
    this.initMap()
  },

  computed: {

    mapData() {
      return state.getters.getMapData
    },
    bipartiteMapData() {
      return state.getters.getBipartiteMapData
    },
    hasLogin() {
      return state.getters.hasLogin
    },
    userInfo() {
      return state.getters.userInfo
    }
  },
  data: function () {
    return {
      myChart: null,

      collapse: null,
      bmapObj: null,
      checkList: [],

      reqLen: 8,

      reqForm: {
        clientId: null,
        topics: null,
        valueInterval: [1, 100],
        alert: null,
        lonInterval: [0, 180.0],
        latInterval: [0, 180.0],
        timestampInterval: [new Date(), new Date()]
      },
      valueSwitch: false,
      lonSwitch: false,
      latSwitch: false,
      timestampSwitch: false,
      testSwitch: false,

    }

  },
  methods: {
    handleClick() {
      console.log('asd');
    },


    initMap() {
      this.formSubmit()
        .then(data => {
          data = data.data.data
          var points = this.convertData(data)
          state.commit('setMapData', points)
          this.myChart = this.$echarts.init(this.$refs.chart);
          this.myChart.setOption(this.generateBipartiteOption(this.bipartiteMapData));
          var bmap = this.myChart.getModel().getComponent('bmap').getBMap();
          this.bmapObj = bmap;
          bmap.disableScrollWheelZoom();
          bmap.disableDoubleClickZoom();
          bmap.disablePinchToZoom();
          bmap.enableAutoResize();
        })
    },

    generateNewForm() {
      return {
        clientId: null,
        topics: null,
        valueInterval: [1, 100],
        alert: null,
        lonInterval: [0, 180.0],
        latInterval: [0, 180.0],
        timestampInterval: [new Date(), new Date()]
      };
    },

    generateOption(data) {
      return {
        animation: false,
        bmap: {
          center: [120.13066322374, 30.240018034923],
          zoom: 14,
          roam: true
        },
        visualMap: {
          show: false,
          top: 'top',
          min: 0,
          max: 5,
          seriesIndex: 0,
          calculable: true,
          inRange: {
            color: ['blue', 'green', 'yellow', 'red']
          }
        },
        series: [{
          type: 'heatmap',
          coordinateSystem: 'bmap',
          data: data,
          pointSize: 5,
          blurSize: 6
        },
        ]
      }
    },

    generateBipartiteOption(data) {
      return {
        animation: false,
        bmap: {
          center: [120.13066322374, 30.240018034923],
          zoom: 14,
          roam: true
        },
        visualMap: [{
          show: false,
          top: 'top',
          min: 0,
          max: 5,
          seriesIndex: 0,
          calculable: true,
          inRange: {
            color: ['#27bfd8', '#3597c4', '#4177b4', '#4e53a2']
          }
        },
          {
            show: false,
            top: 'top',
            min: 0,
            max: 5,
            seriesIndex: 1,
            calculable: true,
            inRange: {
              color: ['#f5a718', '#f48116', '#f35a14', '#f23d13']
            }
          }


        ],
        series: [{
          type: 'heatmap',
          coordinateSystem: 'bmap',
          data: data.normal,
          pointSize: 7,
          blurSize: 7
        },
          {
            type: 'heatmap',
            coordinateSystem: 'bmap',
            data: data.alert,
            pointSize: 7,
            blurSize: 8
          }
        ]
      }
    },


    convertData(reqData) {
      return reqData.map((data) => {
        return [data.lon, data.lat, 5, data.alert];
      });
    },


    formReset() {
      this.reqForm = this.generateNewForm()
    },

    submitAndRefresh() {
      this.formSubmit()
        .then(res => {

          if (res.data.success) {
            if (res.data.data.length === 0) {
              this.$message.warning("您所指定的查询条件下，没有设备信息")
            } else {
              this.$message.success("查询iot数据成功")
              var data = res.data.data
              console.log("数据分布", data.filter(d => d.alert === 1), data.filter(d => d.alert === 0))
              var points = this.convertData(data)
              state.commit('setMapData', points)
              this.myChart = this.$echarts.init(this.$refs.chart);
              this.myChart.setOption(this.generateBipartiteOption(this.bipartiteMapData));
              var bmap = this.myChart.getModel().getComponent('bmap').getBMap();
              this.bmapObj = bmap;
              bmap.disableScrollWheelZoom();
              bmap.disableDoubleClickZoom();
              bmap.disablePinchToZoom();
              bmap.enableAutoResize();
            }
          } else {
            this.$message.error(res.data.info)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    formSubmit() {
      var submitObject = qs.parse(qs.stringify(this.reqForm));

      if (submitObject.topics != null && submitObject.topics.length > 0) {
        submitObject.topics = submitObject.topics.split(",");
      } else {
        submitObject.topics = null
      }
      if (!this.timestampSwitch) {
        submitObject.timestampInterval = null
      } else {
        submitObject.timestampInterval[0] = this.reqForm.timestampInterval[0].getTime();
        submitObject.timestampInterval[1] = this.reqForm.timestampInterval[1].getTime();
      }
      if (!this.valueSwitch) {
        submitObject.valueInterval = null
      } else {
        submitObject.valueInterval = submitObject.valueInterval.map(v => parseFloat(v));
      }
      if (!this.latSwitch) {
        submitObject.latInterval = null
      } else {
        submitObject.latInterval = submitObject.latInterval.map(v => parseFloat(v));
      }
      if (!this.lonSwitch) {
        submitObject.lonInterval = null
      } else {
        submitObject.lonInterval = submitObject.lonInterval.map(v => parseFloat(v));
      }
      return axios.post("/api/queryData", submitObject)
    }


  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.disp_map_file {
  text-align: center;
}

#dispMap {
  background-color: silver;
  width: 90%;
  min-height: 100%;
  overflow: hidden;
  margin: 0 auto;
  position: absolute;
}

.filterItem {
  padding-right: 2%;
  padding-left: 2%;
}


</style>
